let tilteListLi = document.querySelectorAll('.tilteList>li');
let box = document.querySelector('.box');
let mainUl = box.querySelectorAll('.main');
// 保存当前左右切换分类的状态 (决定是否有动画)
let flag = false; // 一开始不是左右切换, 状态为关闭

// 给所有的标题类表的第一个li绑定事件
tilteListLi.forEach(function (el, idx) {
  // 鼠标移入事件
  el.addEventListener('mouseenter', function () {
    // 判断是否为左右切换分类 (如果是那么去除动画)
    // console.log(mainUL[idx].style.height);
    // console.log(getComputedStyle(mainUl[lastIndex], 'style').height;
    if (flag) {
      // 清除过渡动画
      mainUl[idx].style.transition = 'none';
    }

    // 打开状态
    flag = true;

    // 给对应的分类设置行内样式高度
    mainUl[idx].style.height = '150px';
  });

  // 鼠标移出事件
  el.addEventListener('mouseleave', function () {
    // 给对应的分类设置行内样式高度(恢复默认状态)
    mainUl[idx].style.height = '0px';
    // 清除过渡动画
    mainUl[idx].style.transition = 'none';
  });
});

// 给box大盒子设置鼠标移出事件
box.addEventListener('mouseleave', function () {
  console.log('移出box盒子');
  // 恢复动画
  mainUl.forEach(function (el) {
    el.style.transition = '1s ease';
  });
  // 恢复关闭切换状态为false
  flag = false;
});


// let head_list = document.querySelectorAll(".tilteList h4")
// let main = document.querySelectorAll(".main");
// head_list.forEach((item, index) => {
//     item.addEventListener("mouseover", () => {
//         head_list.forEach((item2, index2) => main[index2].style = `height:0px;display:none;`)
//         main[index].style = `height:400px`;
//     })
//     item.addEventListener('mouseout', () => main[index].style = "height:0px")
// })
